<div class="ui small destroy modal transition">
<i class="close icon"></i>
<div class="header">
   销毁容器: {{ vm.selectedContainerId | limitTo:12 }}
</div>
<div class="content">
    <p>你确认要销毁此容器?</p>
</div>
<div class="actions">
    <div class="ui negative button">
        不，取消
    </div>
    <div ng-click="vm.destroyContainer()" class="ui positive right labeled icon button">
        是的，确认
        <i class="checkmark icon"></i>
    </div>
</div>
</div>

<div class="ui small restart modal transition" style="margin-top: -98px;">
    <i class="close icon"></i>
    <div class="header">
       重启容器: {{ vm.selectedContainerId | limitTo:12 }}
    </div>
    <div class="content">
        <p>你确认要重启容器?</p>
    </div>
    <div class="actions">
        <div class="ui negative button">
            不，取消
        </div>
        <div ng-click="vm.restartContainer()" class="ui positive right labeled icon button">
            是的，确认
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>

<div class="ui small stop modal transition" style="margin-top: -98px;">
    <i class="close icon"></i>
    <div class="header">
        停止容器: {{ vm.selectedContainerId | limitTo:12 }}
    </div>
    <div class="content">
        <p>你确认要停止此容器?</p>
    </div>
    <div class="actions">
        <div class="ui negative button">
            不，取消
        </div>
        <div ng-click="vm.stopContainer()" class="ui positive right labeled icon button">
            是的，确认
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>

<div class="ui small pause modal transition" style="margin-top: -98px;">
    <i class="close icon"></i>
    <div class="header">
        暂停容器: {{ vm.selectedContainerId | limitTo:12 }}
    </div>
    <div class="content">
        <p>你确认要暂停此容器?</p>
    </div>
    <div class="actions">
        <div class="ui negative button">
            不，取消
        </div>
        <div ng-click="vm.pauseContainer()" class="ui positive right labeled icon button">
            是的，确认
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>

<div class="ui padded grid">
    <div class="row">
        <div class="column">
            <div class="ui segment page" ng-class="{'yellow': (vm.container.State.Running && vm.container.State.Paused), 'green': (vm.container.State.Running && !vm.container.State.Paused), 'red': !vm.container.State.Running}">
                <div class= "ui grid">
                    <div class="two column row">
                        <div class="column">
                            <h3 class="ui header">
                                <div class="content">
                                    <i class="ui circle icon" ng-class="{'yellow': (vm.container.State.Running && vm.container.State.Paused), 'green': (vm.container.State.Running && !vm.container.State.Paused), 'red': !vm.container.State.Running}"></i>
                                    容器名称：{{ vm.container.Name.split("/")[1] }}
                                    <div class="sub header">镜像：{{ vm.container.Config.Image }}</div>
                                </div>
                            </h3>
                        </div>
                        <div class="floated right aligned right column">
                            <h3 class="ui header">
                                <div class="content">
                                    <div class="header" ng-show="vm.container.State.Running"> {{ vm.container.State.StartedAt | fromCalendar }} 启动</div>
                                    <div class="header" ng-hide="vm.container.State.Running"> {{ vm.container.State.FinishedAt | fromCalendar }} 终止</div>
                                </div>
                            </h3>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                            <div ng-click="vm.showPauseContainerDialog()" class="ui yellow small labeled icon button" ng-show="vm.container.State.Running && !vm.container.State.Paused">
                                <i class="pause icon"></i> 暂停容器
                            </div>
                            <div ng-click="vm.unpauseContainer(vm.container)" class="ui green small labeled icon button" ng-show="vm.container.State.Paused">
                                <i class="play icon"></i> 恢复容器
                            </div>
                            <div ng-click="vm.showStopContainerDialog()" class="ui small labeled icon button">
                                <i class="stop icon"></i> 停止容器
                            </div>
                            <div ng-click="vm.showRestartContainerDialog()" class="ui small green labeled icon button">
                                <i class="refresh icon"></i> 重启容器
                            </div>
                            <div ng-click="vm.showDestroyContainerDialog()" class="ui small red labeled icon button">
                                <i class="delete icon"></i> 销毁容器
                            </div>
                            <div ui-sref="dashboard.stats({id: vm.container.Id})" class="ui small orange labeled icon button">
                                <i class="bar chart icon"></i> 监控容器
                            </div>
                            <div ui-sref="dashboard.logs({id: vm.container.Id})" class="ui small purple labeled icon button">
                                <i class="file icon"></i> 日志
                            </div>
                            <div ui-sref="dashboard.exec({id: vm.container.Id})" class="ui small labeled icon button">
                                <i class="terminal icon"></i> 控制台
                            </div>
                        </div>
                    </div>
                    <div class="three column row">
                        <div class="column">
                            <h4 class="ui dividing header">容器配置</h4>
                            <div class="ui two column grid">
                                <div class="column">
                                    <div class="content">
                                        <span class="header"><b>容器 ID</b></span>
                                        <div class="description">{{ vm.container.Id | limitTo:12 }}</div>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="content">
                                        <span class="header"><b>指令</b></span>
                                        <pre class="logs">{{ vm.container.Config.Cmd.join(" ") }}</pre>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="content">
                                        <span class="header"><b>主机</b></span>
                                        <div class="description">{{ vm.container.Config.Hostname }}</div>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="content">
                                        <span class="header"><b>域名</b></span>
                                        <div class="description">{{ vm.container.Config.Domainname || "N/A" }}</div>
                                    </div>
                                </div>
                            </div>
                            <h4 class="ui dividing header">端口配置</h4>
                            <div class="ui divided list" ng-show="vm.container.NetworkSettings.Ports"> 
                                <div class="item" ng-repeat="(k, values) in vm.container.NetworkSettings.Ports">
                                    <div ng-show="values.length === 0 || values == null"><div class="ui horizontal label">内网</div> {{ k }}</div>
                                    <div class="content" ng-repeat="v in values">
                                        <div><div class="ui blue horizontal label">Exposed</div> {{ v.HostIp }}:{{ v.HostPort }} &#8594; {{ k }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <h4 class="ui dividing header">集群节点</h4>
                            <div class="ui two column grid">
                                <div class="column">
                                    <div class="ui compact">
                                        <span class="header"><b>节点名称</b></span>
                                        <div class="description">{{ vm.container.Node.Name }}</div>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="ui compact">
                                        <span class="header"><b>主机</b></span>
                                        <div class="description">{{ vm.container.Node.Addr }}</div>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="ui compact">
                                        <span class="header"><b>CPUs能力</b></span>
                                        <div class="description">{{ vm.container.Node.Cpus || "&infin;" }}</div>
                                    </div>
                                </div>
                                <div class="column">
                                    <div class="ui compact">
                                        <span class="header"><b>Memory能力</b></span>
                                        <div class="description">{{ (vm.container.Node.Memory / 1024 / 1024 | number:0) || "&infin;" }} MB</div>
                                    </div>
                                </div>
                            </div>
                            <h4 class="ui dividing header" ng-show="vm.container.HostConfig.Dns">用户自定义容器DNS</h4>
                            <div class="ui divided list" ng-show="vm.container.HostConfig.Dns">
                                <div class="item">
                                        <pre ng-repeat="d in vm.container.HostConfig.Dns">{{ d }}</pre>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <h4 class="ui dividing header">环境</h4>
                            <div ng-show="vm.container.Config.Env.length === 0">
                                <div>没有配置环境</div>
                            </div>
                            <div class="item" ng-repeat="e in vm.container.Config.Env">
                                <pre class="logs">{{ e }}</pre>
                            </div>
                        </div>
                    </div>
                    <div class="row" ng-show="vm.links.length>0">
                        <div class="column">
                            <h4 class="ui dividing header">容器链接</h4>
                            <table class="ui sortable celled table">
                                <thead>
                                    <tr>
                                        <th>容器名称</th>
                                        <th>链接名称</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="v in vm.links">
                                        <td>{{v.container}}</td>
                                        <td>{{v.link}}</td>
                                    </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row" ng-hide="vm.isEmptyObject(vm.container.Volumes)">
                        <div class="column">
                            <h4 class="ui dividing header">存储空间</h4>
                            <table class="ui sortable celled table">
                                <thead>
                                    <tr>
                                        <th>存储</th>
                                        <th>主机路径</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="(k, v) in vm.container.Volumes">
                                        <td>{{k}}</td>
                                        <td>{{v}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row" ng-show="vm.top">
                        <div class="column">
                            <h4 class="ui dividing header">进程</h4>
                            <table id="toptable" class="ui sortable celled table">
                                <thead>
                                    <tr>
                                        <th ng-repeat="t in vm.top.Titles">{{ t }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="r in vm.top.Processes">
                                        <td ng-repeat="c in r">
                                            {{ c }}
                                            <script>
$('.ui.sortable.celled.table').tablesort();
                                            </script>
                                        </td>
                                    </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
